import Head from 'next/head';
import { useState, useRef, useEffect } from 'react';

import Layout from '@components/Layout';
import Map from '@components/Map';

import styles from '@styles/Home.module.scss';

const DEFAULT_CENTER = [30.2741, 120.1551]; // Coordinates for Hangzhou (assuming this is for Songshan Lake)

export default function Home() {
  const [messages, setMessages] = useState([
    {
      type: 'user',
      content: '松山湖超过24米的高楼有多少？呈现什么分布格局？'
    },
    {
      type: 'system',
      thinking: '正在理解用户需求，首先我需先获取松山湖的行政区划...',
      steps: [
        '1.调用数据获取接口',
        '2. 查询引擎已有数据',
        '3.对建筑数据按高度进行筛选',
        '4.调用渲染接口绘制到可视化图...'
      ]
    }
  ]);
  const [consoleOutput, setConsoleOutput] = useState([
    'DEBUG:middleware.request_logging:路由处理器返回状态码: 200',
    'DEBUG:middleware.request_logging:请求处理完成',
    'ERROR:middleware.request_logging:解析响应体时出错: Expecting value: line 1 column 1 (char 0)',
    'INFO:    127.0.0.1:54931 - "POST /api/v1/auth/login HTTP/1.1" 200 OK',
    'INFO:    Shutting down'
  ]);
  const [inputValue, setInputValue] = useState('');
  
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  
  const handleInputSubmit = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    
    setMessages([...messages, {
      type: 'user',
      content: inputValue
    }]);
    setInputValue('');
    
    // Simulate system response (in a real app, this would come from your backend)
    setTimeout(() => {
      setMessages(prev => [...prev, {
        type: 'system',
        thinking: '正在处理查询...',
        steps: ['正在分析数据...']
      }]);
    }, 1000);
  };

  return (
    <Layout>
      <Head>
        <title>星地网格李达计算引擎智能平台</title>
        <meta name="description" content="星地网格李达计算引擎智能平台" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className={styles.container}>
        <div className={styles.titleBar}>
          星地网格李达计算引擎智能平台
        </div>
        
        <div className={styles.contentArea}>
          <div className={styles.leftPanel}>
            <div className={styles.panelTitle}>可视图</div>
            <div className={styles.mapContainer}>
              <Map center={DEFAULT_CENTER} zoom={12} className={styles.map}>
                {({ TileLayer, Circle, Popup }) => (
                  <>
                    <TileLayer
                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    />
                    <Circle 
                      center={DEFAULT_CENTER} 
                      radius={5000} 
                      pathOptions={{ fillColor: 'blue', color: 'blue' }}
                    >
                      <Popup>
                        地球<br />(选一个轻量化的GIS框架)
                      </Popup>
                    </Circle>
                  </>
                )}
              </Map>
            </div>
            
            <div className={styles.consoleTitle}>控制台输出</div>
            <div className={styles.consoleOutput}>
              {consoleOutput.map((line, index) => (
                <div key={index} className={styles.consoleLine}>
                  {line}
                </div>
              ))}
            </div>
          </div>
          
          <div className={styles.rightPanel}>
            <div className={styles.panelTitle}>对话框</div>
            <div className={styles.chatContainer}>
              {messages.map((message, index) => (
                <div key={index} className={`${styles.message} ${styles[message.type]}`}>
                  <div className={styles.messageHeader}>
                    {message.type === 'user' ? 'User' : 'System'}
                  </div>
                  {message.type === 'user' ? (
                    <div className={styles.messageContent}>{message.content}</div>
                  ) : (
                    <div className={styles.systemMessage}>
                      {message.thinking && (
                        <div className={styles.thinking}>thinking: {message.thinking}</div>
                      )}
                      {message.steps && (
                        <div className={styles.steps}>
                          {message.steps.map((step, i) => (
                            <div key={i} className={styles.step}>{step}</div>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
            
            <div className={styles.inputContainer}>
              <form onSubmit={handleInputSubmit}>
                <input
                  type="text"
                  value={inputValue}
                  onChange={handleInputChange}
                  className={styles.inputField}
                  placeholder="输入框"
                />
              </form>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}
